<template>
  <div class="p-40px w-auto bg-white rounded-8px flex-1 overflow-y-auto user-info">
    <div class="mb-30px">
      <p class="mb-20px text-18px">头像</p>
      <div class="flex items-center">
        <Upload @success="handleSuccess">
          <a-avatar>
            <img :src="info.header_img" alt="avatar" class="object-cover" />
          </a-avatar>
        </Upload>
      </div>
    </div>
    <div class="mb-30px">
      <p class="mb-20px text-18px">昵称</p>
      <div class="flex items-center">
        <!-- <p>{{ userInfo.nick_name }}</p> -->
        <!-- <img src="@/assets/edit.png" class="ml-12px w-18px h-18px cursor-pointer" /> -->
        <div class="w-300px h-44px rounded-8px flex flex-row items-center">
          <input
            v-model="info.nick_name"
            placeholder="请输入昵称"
            maxlength="11"
            class="input w-full h-44px rounded-8px"
            type="text"
          />
        </div>
      </div>
      <!-- <p class="mt-8px text-[#FF6A6A] text-12px font-bold" >
        It can be modified once every Week, please modify it carefully
      </p> -->
    </div>
    <!-- <div class="mb-30px" >
      <p class="mb-20px text-18px" >聲音介紹</p>
      <div
        class="p-[5px_16px] inline-flex items-center border border-solid border-[#6B39FF] rounded-4px gap-10px"
        
      >
        <img
          src="@/assets/edit.png"
          class="w-16px h-20px"
          
        />
        <p class="text-[#6B39FF]" >點按即可錄製</p>
      </div>
    </div> -->
    <div class="mb-30px">
      <div class="mb-20px flex items-end">
        <span class="text-18px">简介</span>
        <span class="text-12px text-[#666]">({{ info.profile?.length }}/200)</span>
        <!-- <img src="@/assets/edit.png" class="ml-12px w-16px h-16px cursor-pointer" /> -->
      </div>
      <div class="flex items-center">
        <div class="w-300px rounded-8px flex flex-row items-center">
          <textarea
            v-model="info.profile"
            placeholder="请输入简介"
            maxlength="200"
            class="input area w-full max-h-200px min-h-100px rounded-8px"
            type="text"
          />
        </div>
        <!-- <textarea rows="5" cols="33"></textarea> -->
        <!-- <img src="@/assets/add.png" class="w-16px h-16px cursor-pointer" />
        <p class="text-16px text-[#6B39FF]">点击添加简介</p> -->
      </div>
    </div>
    <div class="mb-30px">
      <p class="mb-20px text-18px">性別</p>
      <div class="flex items-center">
        <div class="w-300px rounded-8px flex flex-row items-center select">
          <a-select
            v-model="info.sex"
            :style="{ width: '300px', border: 'none', backgroundColor: 'transparent', padding: 0 }"
            placeholder="Please select ..."
          >
            <a-option :value="0">不想透露</a-option>
            <a-option :value="1">男</a-option>
            <a-option :value="2">女</a-option>
          </a-select>
        </div>
      </div>
      <!-- <p class="mt-8px text-[#FF6A6A] text-12px font-bold" >
        Gender cannot be modified after selection
      </p> -->
    </div>
    <div class="mb-30px">
      <p class="mb-20px text-18px">生日</p>
      <div class="flex items-center">
        <a-date-picker
          style="width: 200px"
          v-model="info.birthday"
          :disabled-date="handleDisabled"
        />
      </div>
    </div>
    <div class="submit">
      <button
        class="px-16px box-border h-32px rounded-8px bg-gradient-to-r from-#FF4DC4 to-#7733FF text-14px font-bold text-white hover:scale-105 transition"
        @click="handleSubmit"
      >
        保存
      </button>
    </div>
  </div>
</template>
<script setup>
import { reactive, watchEffect } from 'vue'
import Upload from '@/components/upload/index.vue'
const props = defineProps(['userInfo'])
const emits = defineEmits(['ok'])
const info = reactive({
  nick_name: '',
  profile: '',
  sex: 0,
  birthday: '',
  header_img: ''
})
watchEffect(() => {
  info.nick_name = props.userInfo.nick_name
  info.profile = props.userInfo.profile
  info.sex = props.userInfo.sex
  info.birthday = props.userInfo.birthday
  info.header_img = props.userInfo.header_img
})
const handleDisabled = (e) => {
  return new Date(e) > new Date()
}
const handleSuccess = (url) => {
  info.header_img = url
}
const handleSubmit = () => {
  emits('ok', info)
  // setUserInfo(info).then(() => {
  //   Message.success('保存成功')
  // })
  // console.log(info)
}
</script>
<style lang="less" scoped>
.input {
  box-sizing: border-box;
  border: 1px solid #d9d9d9;
  outline: none;
  padding: 10px;
}
.input:focus {
  box-shadow: 0 0 0 2px #7733ff;
  border: 1px solid transparent;
}
.area {
  overflow-y: hidden;
}
.user-info {
  &&::-webkit-scrollbar {
    display: none; /* Chrome Safari */
  }
}
.select {
  height: 44px;
  width: 300px;
  border: 1px solid #d9d9d9;
  padding-left: 10px;
}
::v-deep(.arco-select-view-single) {
  background-color: transparent !important;
  padding: 0;
}

::v-depp(.arco-select-view) {
  background-color: red !important;
  border-color: red !important;
  box-shadow: none !important;
}
</style>
